<template>
  <div class="default-graph">
    <i
      v-if="statusInfo?.icon"
      class="iconfont"
      :class="[statusInfo.icon, statusInfo.isRotate && 'rotate']"
      :style="{ color: statusInfo.iconColor }"
    ></i>
    <p>{{ statusInfo.title }}</p>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  import { GraphProps, GraphType } from '../types/index'

  const statusMap: Record<GraphType, GraphProps> = {
    1: {
      icon: 'icon-loader-4-fill',
      title: '数据准备中，请耐心等待',
      isRotate: true,
      iconColor: 'rgba(100, 154, 240, 1)'
    },
    2: {
      icon: 'icon-alert-fill',
      title: '数据准备失败，暂时无法操作',
      iconColor: 'rgba(245, 151, 0, 1)'
    },
    3: {
      icon: 'icon-loader-4-fill',
      title: '数据清洗中，请耐心等待',
      isRotate: true,
      iconColor: 'rgba(100, 154, 240, 1)'
    },
    5: {
      icon: 'icon-alert-fill',
      title: '清洗失败，暂时无法操作',
      iconColor: 'rgba(245, 151, 0, 1)'
    },
    6: {
      icon: 'icon-alert-fill',
      title: '清洗超时，暂时无法操作',
      iconColor: 'rgba(245, 151, 0, 1)'
    },
    7: {
      icon: 'icon-loader-4-fill',
      title: '待解析，请耐心等待',
      isRotate: true,
      iconColor: 'rgba(100, 154, 240, 1)'
    },
    8: {
      icon: 'icon-loader-4-fill',
      title: '解析中，请耐心等待',
      isRotate: true,
      iconColor: 'rgba(100, 154, 240, 1)'
    },
    9: {
      icon: 'icon-loader-4-fill',
      title: '待清洗，请耐心等待',
      isRotate: true,
      iconColor: 'rgba(100, 154, 240, 1)'
    }
  }

  export interface DefaultGraphProps {
    status: GraphType
  }

  const props = withDefaults(defineProps<DefaultGraphProps>(), {
    status: 1
  })

  const statusInfo = computed(() => statusMap[props.status])
</script>

<style lang="less" scoped>
  .default-graph {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 8px 0;

    > i {
      font-size: 40px;
      color: rgba(100, 154, 240, 1);

      &.rotate {
        animation: rotate 2s linear infinite;
      }
    }

    > p {
      font-size: 14px;
      text-align: center;
      color: rgba(17, 22, 31, 0.29);
      font-weight: 400;
      line-height: 22px;
    }
  }
</style>
